<template>
<div class="skill">
  <div class="html">
    <h2>HTML5 & CSS 💙💙💙💙🖤</h2>
    <div class="line"></div>
    <p>标签语义化: 能够使用HTML5的标签写语义化的页面</p>
    <p>CSS: 熟练掌握CSS3，熟悉float，position及Flex等布局，具有平均水准之上的审美，追求设计优雅。</p>
  </div>
  <div class="js">
    <h2>JavaScript 💙💙💙💙🖤</h2>
    <div class="line"></div>
    <p>熟悉JavaScript，理解异步，this，闭包，函数防抖，原型链等</p>
    <p>熟悉ES6的常用语法，能在项目中普遍使用let,箭头函数</p>
    <p>了解HTTP协议及浏览器工作原理，了解浏览器端EventLoop和前端性能优化策略</p>
  </div>
  <div class="vue">
    <h2>Vue 💙💙💙💙🖤</h2>
    <div class="line"></div>
    <p>熟悉Vue框架及Vue模板语法的使用，理解重要概念如：响应式原理，生命周期函数，组件传递，路由并有相关项目经验</p>
  </div>
</div>
</template>

<script>
export default {
  name: "skill"
}
</script>

<style scoped>
.skill {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.line {
  width: 100%;
  height: 2px;
  background: #3c3c3c;
}
.html,
.js,
.vue {
  width: 80%;
}
p {
  margin-top: 1rem;
}
@media screen and (max-width:600px) {
.skill {
  font-size: 0.5rem;
}
}
</style>
